<template>
  <page-container :title="false">
    <a-spin :spinning="loadingStore" slot="content">
      <store-info-wrap :storeInfo="storeInfo" storeType="appliance" @check="getStoreInfo"></store-info-wrap>
    </a-spin>
    <div class="store-btns">
      <a-button type="primary" class="store-btn">订单</a-button>
      <router-link :to="{ name: 'clerkList', query: { id: storeInfo.id, type: 'appliance' } }">
        <a-button type="primary" class="store-btn">店员管理</a-button>
      </router-link>
      <router-link :to="{ name: 'inviteUser', query: { id: storeInfo.id, type: 'appliance' } }">
        <a-button type="primary" class="store-btn">邀请的人</a-button>
      </router-link>
      <a-button type="primary" class="store-btn" @click="handleRatio">设置乐管家百分比</a-button>
      <div class="store-scan-btn">
        <a-space>
          <a-button @click="getOrderPush" v-if="!orderPushing" type="primary">语音提示</a-button>
          <a-button @click="getOrderPush" v-else type="danger">语音提示中</a-button>
        </a-space>
      </div>
    </div>
    <a-card :bordered="false" style="margin-top:24px">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-range-picker @change="onChange">
                  <a-icon slot="suffixIcon" type="calendar" />
                </a-range-picker>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input placeholder="姓名/手机号/订单号" v-model="queryParam.search" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="$refs.orderTable.refresh()" icon="search">查询</a-button>
              </span>
            </a-col>
            <!-- <a-col :md="1" :sm="24" :offset="10">
              <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
            </a-col> -->
          </a-row>
        </a-form>
      </div>
      <service-order-table :data="loadData" ref="orderTable" />
      <steward-ratio-form ref="stewardRatioModal" @ok="getStoreInfo" />
    </a-card>
  </page-container>
</template>

<script>
import { applianceOrder, applianceOrderPush } from '@/api/appliance'
import { storeInfo } from '@/api/store'
import StewardRatioForm from '@/views/store/modules/stewardRatioForm'
import { mapGetters } from 'vuex'
import StoreInfoWrap from '@/views/store/modules/StoreInfoWrap'
import ServiceOrderTable from '@/components/serviceOrderTable/serviceOrderTable'
export default {
  name: 'ApplianceOrder',
  components: {
    StewardRatioForm,
    StoreInfoWrap,
    ServiceOrderTable
  },
  data () {
    return {
      queryParam: {
        search: '',
        atime: '',
        etime: ''
      },
      loadData: parameter => {
        const params = this.$route.params || {}
        const requestParameters = Object.assign({ id: params.store_id }, parameter, this.queryParam)
        console.log('loadData request parameters:', requestParameters)
        return applianceOrder(requestParameters).then(res => {
          return res.data
        })
      },
      storeInfo: {},
      loadingStore: false,
      orderPushing: false // 语音播报状态
    }
  },
  created () {
    this.getStoreInfo()
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    getOrderPush () {
      if (this.orderPushing) {
        clearInterval(this.timer)
        this.time = null
        this.orderPushing = false
      } else {
        this.orderPushing = true
        this.timer = setInterval(() => {
          applianceOrderPush().then(res => {
            this.playAudio()
          })
        }, 1000 * 60)
      }
    },
    playAudio () {
      this.$refs.audio.play()
    },
    handleRatio () {
      const ratioMdl = {
        id: this.storeInfo.id,
        number: this.storeInfo.le_ratio || this.storeInfo.ratio,
        type: 'appliance',
        mobile: this.userInfo.mobile
      }
      this.$refs.stewardRatioModal.show(ratioMdl)
    },
    getStoreInfo () {
      this.loadingStore = true
      const params = this.$route.params
      storeInfo({ id: params.store_id, type: 'appliance' })
        .then(res => {
          this.storeInfo = res.data
        })
        .finally(() => (this.loadingStore = false))
    },
    onChange (date, dateString) {
      console.log(date, dateString)
      this.queryParam.atime = dateString[0]
      this.queryParam.etime = dateString[1]
    }
  }
}
</script>
